<?php echo elgg_view('golfscore/title');?>

<div class="hole_content">
<div class="hole_img">
	
	<?php
// 		$options = array("golf_course_card_id" => get_input('cid'));
// 		$hole_id = get_input('cid');
// 		echo $hole_id;
		//$score = elgg_get_golf_score(array('golf_score_id' => $score_id));
		//$golf_course_cards = elgg_get_golf_course_card($options);
		//$golf_course_cards = $golf_course_cards[0];
		
		$golf_course_id = get_input('golf_course_id');
		$hole = get_input('hole');
		$tee = get_input('tee');
		$golf_score_id = get_input('golf_score_id');
		//Test
		//$golf_course_id = 1;
		//$hole = 1;
		//$tee = 'gold'; 
		
		$score = elgg_get_golf_score(array('golf_course_id' => $golf_course_id));
		$score = $score[0];
		$golf_course_cards = elgg_get_golf_course_card(array('golf_course_id'=>$golf_course_id, 'hole'=> $hole));
		$golf_course_card = $golf_course_cards[0];
		
		$golf_course_card_id = $golf_course_card->golf_course_card_id;
		$map = $golf_course_card->map;
		$attrs = getTeeAttributes($tee? $tee :'gold', $golf_course_card);
		
		$tee_x = $attrs['tee_x'] ? $attrs['tee_x'] : 466;
		$tee_y = $attrs['tee_y'] ? $attrs['tee_y'] : 135;
				
		$hole_x = $golf_course_card->hole_x ? $golf_course_card->hole_x : 51;
		$hole_y = $golf_course_card->hole_y ? $golf_course_card->hole_y : 138;
		$distance = $attrs['distance'] ? $attrs['distance'] : 396;
		$fname = explode('.', $map);
	?>
	<div id="map">
		<canvas id="myCanvas" width="380" height="570" style="position: absolute;top:0;left:0; z-index: 10"></canvas>
		<img src="<?php echo elgg_get_site_url();?>_graphics/hole/<?php echo $map?>" />
		<div id="tee_container" class="draggable object objtee"><span id='item'></span></div>
		<div id="ball_container" class="draggable object objball"><span id='item'></span></div>
		<div id="hole_container" class="draggable object objhole"><span id='item'></span></div>
		<div id="target_container" class="draggable object objtarget"><span id='item'></span><label id="distance"></label></div>
	</div>

</div>
<?php if(isset($golf_score_id)){?>
<?php if($hole!=1){?>
<div id="lastHole" onclick="onLastHole(<?php echo $score->golf_score_id ?>,<?php echo $hole?>)"></div>
<?php }?>
<?php if($hole!=18){?>
<div id="nextHole" onclick="onNextHole(<?php echo $score->golf_score_id ?>,<?php echo $hole?>)"></div>
<?php }?>
<?php }else{?>
	<?php if($hole!=1){?>
	<div id="lastHole" onclick="onLastHoleCourse(<?php echo $golf_course_id ?>,<?php echo $hole?>)"></div>
	<?php }?>
	<?php if($hole!=18){?>
	<div id="nextHole" onclick="onNextHoleCourse(<?php echo $golf_course_id ?>,<?php echo $hole?>)"></div>
	<?php }?>

<?php }?>
<div id="zoomed-image" style="display:none;position: absolute;width:140px;height:140px;background-color:white;background-image:url('<?php echo elgg_get_site_url();?>_graphics/hole/<?php echo $fname[0]."_large"?><?php echo ".".$fname[1] ?>');background-repeat: no-repeat;">
		<span id="zoomed_distance"></span>
		<label id="target">o</label>
</div>
<?php

  //$courses = elgg_get_golf_course();
  //echo "<ul class='list_hole'>"; 
    echo "<div class='hole_info'>";  ?>
  	  <h2><label style='background: <?php echo $tee ?>; margin-bottom: 10px;width:20px;height:20px;float:left;'></label><?php echo $golf_course_card -> hole ?><span></span></h2>
  	  <?php echo "<p class='hole_par'>Par ".$golf_course_card -> par . "</p>";
  	  if(!$tee){?>
  	  <ul class='list_distance'>
  	  <li class="current" onclick="changeTeePosition('gold')"><span class="gold"></span><?php echo $golf_course_card -> gold_tee_distance ?></li>  
  	  <li onclick="changeTeePosition('blue')"><span class="blue"></span><?php echo $golf_course_card -> blue_tee_distance ?></li>
  	  <li onclick="changeTeePosition('white')"><span class="white"></span><?php echo $golf_course_card -> white_tee_distance ?></li> 
  	  <li onclick="changeTeePosition('red')"><span class="red"></span><?php echo $golf_course_card -> red_tee_distance ?></li>
  	  
  	  
    </ul>
    <?php }
    echo "</div>"; 
  ?>
  </div>

 <script type="text/javascript">
 $(document).ready(function(){
	flag = true;
	 $('.btnaddscore').click(function(){
			if(flag==true){
				$('._enter_edit_score').slideDown();
				flag = false;
				$("html, body").animate({ scrollTop: $(document).height() }, "slow");
			}else{
				$('._enter_edit_score').slideUp();
				flag = true;
			}
			return flag;
	});
	 $("html, body").animate({ scrollTop: 0 }, "fast");	
});	

 </script>
 
 <script>

var tee_x = <?php echo $tee_x?>;
var tee_y = <?php echo $tee_y?>;

var hole_x = <?php echo $hole_x?>;
var hole_y = <?php echo $hole_y?>;

var distance = <?php echo $distance?>;

//Setup Map
var map = new Map();
map.setTeePosition(tee_x,tee_y);
map.setHolePosition(hole_x,hole_y);
map.setHoleDistance(distance);
map.ball.setPosition(tee_x,tee_y);
map.ball.departure.setPosition(tee_x,tee_y);
map.target.setPosition(hole_x,hole_y);
//Draw
var teeContainer = $('#tee_container');
var holeContainer = $('#hole_container');
var ballContainer = $('#ball_container');
var targetContainer = $('#target_container');

var tee = $('#tee_container #item');
var hole = $('#hole_container #item');
var target = $('#target_container #item');
var ball = $('#ball_container #item');
var mapOffsetTop = $("#map").offset().top;
var mapOffsetLeft = $("#map").offset().left;
console.log(mapOffsetTop,mapOffsetLeft);
teeContainer.offset({ top: map.tee.x - mapOffsetTop, left: map.tee.y-mapOffsetLeft });
holeContainer.offset({ top: map.hole.x - mapOffsetTop , left: map.hole.y - mapOffsetLeft });
ballContainer.offset({ top: map.ball.x - mapOffsetTop, left: map.ball.y - mapOffsetLeft });
targetContainer.offset({ top: map.target.x - mapOffsetTop, left: map.target.y - mapOffsetLeft });

$('#distance').text(Math.floor(map.getTargetToBallDistance()));
drawLine(map.target.y - mapOffsetLeft+16-2,map.target.x - mapOffsetTop+32,map.ball.y - mapOffsetLeft+16-2,map.ball.x - mapOffsetTop+32);
tee.text(teeContainer.offset().top + '|' + teeContainer.offset().left);

targetContainer.draggable({
	drag: function(e){
		setBallTargetDistance();
		changePosition($(this));
		drawLine(targetContainer.offset().left+16-4,targetContainer.offset().top+32-5,ballContainer.offset().left+16-4,ballContainer.offset().top+32-5);
	},
	stop: function(){
		drawLine(targetContainer.offset().left+16-4,targetContainer.offset().top+32-5,ballContainer.offset().left+16-4,ballContainer.offset().top+32-5);
		$('#zoomed-image').hide();
	}
});

ballContainer.draggable({
	drag: function(){
		setBallShotDistance();
		setBallTargetDistance();
		changePosition($(this));
		drawLine(targetContainer.offset().left+16-4,targetContainer.offset().top+32-5,ballContainer.offset().left+16-4,ballContainer.offset().top+32-5);
	},
	stop: function(){
		drawLine(targetContainer.offset().left+16-4,targetContainer.offset().top+32-5,ballContainer.offset().left+16-4,ballContainer.offset().top+32-5);
		resetBallShot();
		$('#zoomed-image').hide();
	}
});

function changeTeePosition(tee){
	var teeAttr = getTeeAttr(tee);
	console.log(teeAttr);
	//map.setHoleDistance(teeAttr[2]);
	map.ball.setPosition(teeAttr[0],teeAttr[1]);
	map.setTeePosition(teeAttr[0],teeAttr[1]);
	teeContainer.offset({ top: map.tee.x + $("#map").offset().top, left: map.tee.y + $("#map").offset().left });
	ballContainer.offset({ top: map.ball.x + $("#map").offset().top, left: map.ball.y + $("#map").offset().left });
	$('#distance').text(Math.floor(map.getTargetToBallDistance()));


}

function getTeeAttr(tee){
	var attrs = new Array();
	if(tee == 'gold' || tee == 'black') {
		attrs[0] = <?php echo $golf_course_card->gold_tee_x;?>;
		attrs[1] = <?php echo $golf_course_card->gold_tee_y;?>;
		attrs[2] = <?php echo $golf_course_card->gold_tee_distance;?>;
	} else if(tee == 'blue') {
		attrs[0] = <?php echo $golf_course_card->blue_tee_x?>;
		attrs[1] = <?php echo $golf_course_card->blue_tee_y?>;
		attrs[2] = <?php echo $golf_course_card->blue_tee_distance;?>;
	} else if(tee == 'white') {
		attrs[0] = <?php echo $golf_course_card->white_tee_x?>;
		attrs[1] = <?php echo $golf_course_card->white_tee_y?>;
		attrs[2] = <?php echo $golf_course_card->white_tee_distance;?>;
	} else if(tee == 'red') {
		attrs[0] = <?php echo $golf_course_card->red_tee_x?>;
		attrs[1] = <?php echo $golf_course_card->red_tee_y?>;
		attrs[2] = <?php echo $golf_course_card->red_tee_distance;?>;
	}
	return attrs;
}

function changePosition(object){
	var p = object.offset();
    var xPos = p.left;
    var yPos = p.top;
	changeZoomedPosition(xPos,yPos);
	changeZoomedImage(object.position().left,object.position().top);
	$('#zoomed-image').show();
	
}

function setBallTargetDistance(){
	map.target.setPosition(target.offset().top, target.offset().left);
	map.ball.setPosition(ball.offset().top, ball.offset().left);
	//target.text(map.getTargetToBallDistance());
	$('#distance').text(Math.floor(map.getTargetToBallDistance()));
	$('#zoomed_distance').text(Math.floor(map.getTargetToBallDistance()));
	
}

function setBallShotDistance(){
	map.ball.setPosition(ball.offset().top, ball.offset().left);
	//ball.text(map.getBallShotDistance());
}

function resetBallShot(){
	map.ball.departure.setPosition(map.ball.x,map.ball.y);
}

function drawLine(xStart,yStart,xEnd,yEnd){
	  var html5Canvas = $('#myCanvas');
      var canvasDiv = $('#map');

      if (html5Canvas.length > 0) {
          html5Canvas[0].width = canvasDiv.width();
          html5Canvas[0].height = canvasDiv.height();
      }
      
      var canvas = document.getElementById('myCanvas');
      var context = canvas.getContext('2d');
      context.beginPath();
      context.moveTo(xStart, yStart);
      context.lineTo(xEnd, yEnd);
      context.lineWidth = 2;

      // set line color
      context.strokeStyle = '#ff0000';
      context.stroke();
      
}

function shot(){
	var departure = map.getDeparturePosition(); //Offset
	 
	$.ajax({type: "POST",
		url: '<?php echo elgg_get_site_url() . "ajax/view/igolf_map/shot" ?>',
		dataType: "html",
		cache: false,
		data: {
			golf_course_card_id : "<?php echo $golf_course_card_id?>",
			shot_position_x : departure.top,
			shot_position_y : departure.left,
			distance_to_hole: 396,
		},
		success: function(data) {
			
		}
	});
}

</script>
 
 <script>
 	//Stick zooming container to the dragging icon
 	var zoomingContainerWidth = 140;
 	var draggableIconWidth = 32;
 	var zoomingContainerBorderWidth = 4;
 	var zoomedPercentage = 3; //*100

 	var zoomingContainerTop = 70;
 	var zoomingContainerLeft = 10;
 	
	function changeZoomedPosition(x,y){
		var xp = (x - zoomingContainerWidth/2 + draggableIconWidth/2 - zoomingContainerBorderWidth);
		var yp = (y - zoomingContainerWidth/2 + draggableIconWidth - zoomingContainerBorderWidth) - zoomingContainerTop;
		if(yp <= 0){
			yn = 140 + yp;
			$('#zoomed-image').offset({'left':xp,'top':yn});
		}else{
			$('#zoomed-image').offset({'left':xp,'top':yp});
		}
	}

 	//Zoom to the position of the dragging icon
	function changeZoomedImage(x,y){
		//draggableicon's position.left * zoomedpercentage - zoomingcontainer.width/2 + draggableicon.width/2 - zoomingcontainer.border
		var xz = x * zoomedPercentage - draggableIconWidth/2 - zoomingContainerBorderWidth ;
		var yz = y * zoomedPercentage + draggableIconWidth - zoomingContainerBorderWidth;
		var pos = ' ' + -xz + 'px ' + -yz +'px';
		$('#zoomed-image').css({'background-position' : pos});
		
	}
</script>
 
  <style>
.draggable {
 width: 32px; height: 32px;
 display:block;
}

.objtarget{
background: url(<?php echo elgg_get_site_url();?>_graphics/icon_marker.png) no-repeat top left;
z-index: 22;
}
.objtarget label { position: relative; background: #fff; border: 2px solid #c2e1f5;
border-radius: 3px;
-webkit-border-radius: 3px;
color: #333;
padding: 5px;
display:block;
margin-top: -35px;
margin-left: -2px;
width: 20px; text-align:center;
font-size: 12px;
} 
.objtarget label:after, .objtarget label:before {
 top: 100%; border: solid transparent; content: " "; height: 0; width: 0; position: absolute; pointer-events: none;
 } 
.objtarget label:after { border-color: rgba(136, 183, 213, 0); border-top-color: #fff; border-width: 4px; left: 50%; margin-left: -4px; }
.objtarget label:before { border-color: rgba(194, 225, 245, 0); border-top-color: #fff; border-width: 7px; left: 50%; margin-left: -7px; }

.objtarget:hover{
	background: url(<?php echo elgg_get_site_url();?>_graphics/icon_marker_hover.png) no-repeat top left;
}

.objtee{
background: url(<?php echo elgg_get_site_url();?>_graphics/icon_ball.png) no-repeat top left;
z-index: 5;
 text-indent: -9999px;
  display: none;
}

.objhole{
background: url(<?php echo elgg_get_site_url();?>_graphics/icon_hole.png) no-repeat top left;
z-index: 10;
 text-indent: -9999px;

}

.objball {
background: url(<?php echo elgg_get_site_url();?>_graphics/icon_marker1.png) no-repeat top left;
z-index:15;
}

.objball:hover{
background: url(<?php echo elgg_get_site_url();?>_graphics/icon_marker1_hover.png) no-repeat top left;
}

.objmove{
 text-indent: -9999px;
display:block;
width: 32px; height: 32px;
background: url(<?php echo elgg_get_site_url();?>_graphics/icon_move.png) no-repeat top left;
}

#map {
	position: relative!important;
	overflow:hidden;
	min-width: 380px; min-height: 570px;
}

#map img{
display:block;
}
#map div{
position: absolute;
}

.hole_distance{
 margin-bottom: 10px;
 color: #555;
 margin-top: 5px;
}
.hole_distance span{
font-weight:bold;
color :red;
}
#zoomed-image{
border: 4px solid #fff;
border-radius: 50%;
-webkit-border-radius: 50%;
box-shadow: 0px 2px 3px rgba(0,0,0,0.4);
-webkit-box-shadow: 0px 2px 3px rgba(0,0,0,0.4);
z-index: 30;
}

#zoomed-image #target{
	background: url(<?php echo elgg_get_site_url();?>_graphics/icon_marker.png) no-repeat top left;
	width: 32px; height: 32px;
	 display:block;
	 text-indent: -9999px;
	 position: absolute;
	 top: 38px;
	 left:54px;
}

#zoomed-image #zoomed_distance{
 	 width: 32px;
	 display:block;
	 position: absolute;
	 text-align:center;
	 top: 18px;
	 left:54px;
}


.btnaddscore{
display: block;
width: 40px; height: 40px;
background: #47D9BF;
border-radius: 8px;
-webkit-border-radius: 8px;
z-index: 40;
position: fixed;
right: 2%;
bottom: 50px;
opacity: .4;
}
.btnaddscore:hover{
opacity: 1;
}
.btnaddscore span{
background: url(<?php echo elgg_get_site_url();?>_graphics/icon_addscore.png) no-repeat center center;
display:block;
width: 40px; height: 40px; 
}
._enter_edit_score{
display:none;
z-index: 20;
}
</style>